<template>
  <div>
    <div class="loading" v-show="!hasBuy">
      <atom-loading size="24" />
    </div>
    <div v-show="hasBuy">
      <keep-alive>
        <component :is="component"></component>
      </keep-alive>
      <template v-if="showWencai">
        <atom-overlay :show="showTooltip" @click="closeShowTooltip" :z-index="11" />
        <atom-tooltip
          :value="showTooltip"
          placement="top-start"
          :max-line="2"
          content="嗨，我是付费专属AI助手，个股涨停分析，概率预测等问题，您随时问我！"
        >
        </atom-tooltip>
        <AiWencai
          :componentType="2"
          :askTextList="askTextList"
          v-if="askTextList.length"
          @click.native="closeShowTooltip"
        ></AiWencai>
      </template>
      <BottomTab @navigateTo="navigateTo" />
    </div>
  </div>
</template>

<script>
import BottomTab from '@/components/common/BottomTab.vue';
import AiWencai from '@/components/common/AiWencai.vue';
import Ztgy from '@/views/home/Ztgy.vue';
import Ztfp from '@/views/home/Ztfp.vue';
import Ztjy from '@/views/home/Ztjy.vue';
import Ztjk from '@/views/home/Ztjk.vue';
import { errorReport, clientReplace, jump2804Url } from '@/scripts/tools.js';
import { reqAskText, reqWencaiSwitch, reqUserAuth } from '@/apis/index.js';
import config from '@/config/index.ts';

export default {
  name: 'Home',
  components: {
    BottomTab,
    AiWencai,
    Ztgy,
    Ztfp,
    Ztjy,
    Ztjk,
  },
  provide() {
    return {
      showWencai: () => this.showWencai,
    };
  },
  data() {
    return {
      component: 'Ztgy',
      showTooltip: false,
      askTextList: [],
      showWencai: false,
      // 是否是灰名单用户
      isGrayUser: false,
      // 是否是白名单用户
      isWhiteUser: false,
      // 是否购买了涨停助手权限
      hasBuy: false,
    };
  },
  methods: {
    // 判断用户是否购买了涨停助手
    getUserZtzsPermission() {
      const params = JSON.stringify({ auth_code: ['ztjyzs'], app_name: 'mobileweb-vaserviece-limitup-front-pod' });
      return reqUserAuth(params)
        .then(res => {
          this.hasBuy = !!res?.data?.ztjyzs;
        })
        .catch(err => {
          this.hasBuy = false;
          errorReport({
            name: `用户权限接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
    // 获取问财机器人灰度名单和白名单
    getWencaiConfig() {
      const userid = window.getUserid() + '';
      const useridSuffix = userid.charAt(userid.length - 1);
      return reqWencaiSwitch()
        .then(res => {
          const userConfInfo = res?.data?.limitUpWenCai;
          const gayUser = userConfInfo.grayUser.split(',');
          const whiteUser = userConfInfo.whiteUser.split(',');
          for (let j = 0; j < whiteUser.length; j++) {
            if (userid === whiteUser[j]) {
              // 如果是白名单用户，直接展示问财机器人
              this.isWhiteUser = true;
              return;
            }
          }
          for (let i = 0; i < gayUser.length; i++) {
            if (useridSuffix === gayUser[i]) {
              // 如果是灰名单用户，则看是否为购买或赠送
              this.isGrayUser = true;
            }
          }
        })
        .catch(err => {
          errorReport({
            name: `问财机器人灰度名单接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
    judgeFirstEnter() {
      return window.localStorage.getItem(`limit-up-first-enter-${window.getUserid()}`);
    },
    navigateTo(routeName) {
      this.component = routeName;
      this.closeShowTooltip();
    },
    closeShowTooltip() {
      this.showTooltip = false;
      window.localStorage.setItem(`limit-up-first-enter-${window.getUserid()}`, 1);
    },
    getAskText() {
      reqAskText()
        .then(res => {
          this.askTextList = res.data;
        })
        .catch(err => {
          errorReport({
            name: `接口获取ai问句报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
  },
  mounted() {
    if (!this.judgeFirstEnter()) {
      this.showTooltip = true;
    }
    Promise.all([this.getUserZtzsPermission(), this.getWencaiConfig()]).then(() => {
      this.showWencai = this.isWhiteUser || (this.isGrayUser && this.hasBuy);
      if (!this.isWhiteUser && !this.hasBuy) {
        clientReplace(jump2804Url.bind(this, config.url.oldPage));
      }
    });
    this.getAskText();
  },
};
</script>

<style lang="less" scoped>
.loading {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style lang="less">
.atom-tooltip {
  position: fixed !important;
  top: initial !important;
  bottom: 200px;
  left: 32px !important;
  .atom-tooltip__content-wrapper {
    max-width: 5.4rem;
  }
  .atom-tooltip__arrow {
    width: 0.2rem !important;
    height: 0.08rem !important;
    top: 0.99rem !important;
  }
}
</style>
